import React, { Component, useEffect, useState } from 'react'
import './styles/App'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'


function App() {
  const [list, setList] = useState([]);
  const addItem = (item) => {
    setList(list => [item, ...list]);
  }
  const deleteItem = (id) => {
    const filters = list.filter(item => item.id !== id);
    setList(list => list = filters)
  }
  const changeStatus = (id) => {
    let newlist = [...list];
    newlist.map(item => {
      if (item.id == id) {
        item.done = !item.done;
      }
    })
    setList(list => list = newlist)
  }
  const changeAllStatus = (checked) => {
    if (!list.length) {
      return false;
    }
    let newlist = [...list];
    newlist.map(item => item.done = checked);
    setList(list => list = newlist)
  }
  const deleteAllDone = () => {
    if (!list.length) {
      return false;
    }
    const newlist = list.filter(item => item.done !== true);
    setList(list => list = newlist)
  }

  return (
    <div className='box'>
      <Header addItem={addItem} />
      <List list={list} deleteItem={deleteItem} changeStatus={changeStatus} />
      <Footer list={list} changeAllStatus={changeAllStatus} deleteAllDone={deleteAllDone} />
    </div>
  )
}

export default App
